import React, { FC, useEffect, useState } from 'react'
import { SideBar, Tag } from 'antd-mobile'
import { LikeOutline, EditSOutline, HeartOutline, UserOutline, EnvironmentOutline, ClockCircleOutline, FireFill } from 'antd-mobile-icons'
import dayjs from 'dayjs'


import { tagList } from '../../utils/index'
import { getalltravelsAPI } from '../../api/api'
import './Class.scss'
import { baseURL } from '../../api/request'
import { useNavigate } from 'react-router-dom'

const ClassifyContent: FC = () => {
  const router = useNavigate()
  const [classList, setClassList] = useState([])
  const [changeList, setChangeList] = useState([])
  const [changeTag, setChangeTag] = useState('')

  const getClassList = async () => {
    const res: any = await getalltravelsAPI()
    if (res.code == 200) {
      setClassList(res.result)

      setChangeList(res.result)
    }
  }

  useEffect(() => {
    getClassList()
  }, [])


  // 分类筛选
  const changeActive = (value: any) => {
    if (value == '全部') {
      setChangeTag('')
      setChangeList(classList)
      return false
    }
    const res = classList.filter((item: any) => {
      return item.tags.some((v: any) => {
        return v.label == value
      })
    })
    setChangeList(res)
    setChangeTag(value)
    console.log(changeTag);
  }

  return (
    <div className='class-boss'>
      <div className='class-side'>
        <SideBar onChange={changeActive}>
          {tagList.map(item => (
            <SideBar.Item key={item.label} title={item.label} />
          ))}
        </SideBar>
      </div>

      <div className='class-content'>
        {
          changeList.map((item: any) => {
            return (
              <div key={item._id} className='class-content-box' onClick={() => router('/detail/' + item._id + '?title=' + item.title)}>
                <p className='content-title'>{item.title}</p>
                <p className='content-username'>
                  <UserOutline />：
                  {item.author?.username}
                </p>
                <p className='content-address'>
                  <EnvironmentOutline />：
                  {item.address}
                </p>
                <p className='content-date'>
                  <ClockCircleOutline />：
                  {dayjs(item.date).format("YYYY-MM-DD")}
                </p>
                <p className='content-hot'>
                  <FireFill />：
                  热度：{item.hot}
                </p>
                {
                  item.tags.map((v: any, n: any) => {
                    return (
                      <Tag color={v.label == changeTag ? '#ff6430' : 'success'} key={n} className="content-tag">{v.label}</Tag>
                    )
                  })
                }
                <div className='content-imgbox'>
                  {
                    item.imgs.map((e: any, i: any) => {
                      return (
                        <img src={e.url?.replace(/public/, baseURL)} alt='' key={i} />
                      )
                    })
                  }
                </div>
                <p className='content-content'>{item.content}</p>
                <div className='content-footer'>
                  <span><LikeOutline />：0</span>
                  <span><EditSOutline />：0</span>
                  <span><HeartOutline />：0</span>
                </div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default ClassifyContent
